<template>
  <div class="simple-test" style="background: rgba(0,0,0,0.8); padding: 20px; margin: 10px; border-radius: 5px; color: white;">
    <h3>🔧 API连接测试</h3>
    
    <div class="test-info">
      <p><strong>环境:</strong> {{ isDev ? '开发环境' : '生产环境' }}</p>
      <p><strong>API地址:</strong> {{ testUrl }}</p>
    </div>
    
    <div class="test-buttons">
      <button @click="testProxy" :disabled="testing" class="btn">
        {{ testing ? '测试中...' : '测试代理' }}
      </button>
      <button @click="testDirect" :disabled="testing" class="btn">
        {{ testing ? '测试中...' : '测试直连' }}
      </button>
    </div>
    
    <div v-if="result" class="result" :class="result.success ? 'success' : 'error'">
      <h4>{{ result.success ? '✅ 成功' : '❌ 失败' }}</h4>
      <pre>{{ JSON.stringify(result, null, 2) }}</pre>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const testing = ref(false)
const result = ref(null)

const isDev = computed(() => import.meta.env.DEV)
const testUrl = computed(() => isDev.value ? '/api/jdbcmgr.do' : 'http://192.168.1.111:8080/coolv/edatasource/jdbcmgr.do')

// 测试代理
const testProxy = async () => {
  testing.value = true
  result.value = null
  
  try {
    console.log('测试代理:', '/api/jdbcmgr.do')
    
    const response = await fetch('/api/jdbcmgr.do', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
      },
      body: new URLSearchParams({
        action: 'test',
        t: Date.now().toString()
      })
    })
    
    const text = await response.text()
    
    result.value = {
      success: response.ok,
      method: 'proxy',
      status: response.status,
      statusText: response.statusText,
      contentType: response.headers.get('content-type'),
      responseLength: text.length,
      responsePreview: text.substring(0, 200),
      isJson: text.trim().startsWith('{') || text.trim().startsWith('[')
    }
  } catch (error) {
    result.value = {
      success: false,
      method: 'proxy',
      error: error.message,
      type: error.constructor.name
    }
  } finally {
    testing.value = false
  }
}

// 测试直连
const testDirect = async () => {
  testing.value = true
  result.value = null
  
  try {
    console.log('测试直连:', 'http://192.168.1.111:8080/coolv/edatasource/jdbcmgr.do')
    
    const response = await fetch('http://192.168.1.111:8080/coolv/edatasource/jdbcmgr.do', {
      method: 'POST',
      mode: 'cors',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
      },
      body: new URLSearchParams({
        action: 'test',
        t: Date.now().toString()
      })
    })
    
    const text = await response.text()
    
    result.value = {
      success: response.ok,
      method: 'direct',
      status: response.status,
      statusText: response.statusText,
      contentType: response.headers.get('content-type'),
      responseLength: text.length,
      responsePreview: text.substring(0, 200),
      isJson: text.trim().startsWith('{') || text.trim().startsWith('[')
    }
  } catch (error) {
    result.value = {
      success: false,
      method: 'direct',
      error: error.message,
      type: error.constructor.name
    }
  } finally {
    testing.value = false
  }
}
</script>

<style scoped>
.btn {
  background: #29D9D5;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  margin: 5px;
  cursor: pointer;
}

.btn:hover:not(:disabled) {
  background: #1fb8b4;
}

.btn:disabled {
  background: #666;
  cursor: not-allowed;
}

.test-info {
  background: rgba(255,255,255,0.1);
  padding: 10px;
  border-radius: 4px;
  margin: 10px 0;
}

.result {
  margin-top: 15px;
  padding: 10px;
  border-radius: 4px;
}

.result.success {
  background: rgba(20, 225, 68, 0.2);
  border: 1px solid #14e144;
}

.result.error {
  background: rgba(255, 99, 22, 0.2);
  border: 1px solid #ff6316;
}

.result pre {
  background: rgba(0,0,0,0.5);
  padding: 10px;
  border-radius: 3px;
  font-size: 11px;
  overflow-x: auto;
  white-space: pre-wrap;
}
</style>
